Q: 動畫影片看起來卡卡的？
A: 請各位見諒，跑起來真真是順暢的呢！

上一篇的Slot效果以父層固定寬高後設置overflow: hidden，同時子層設定animation讓元素位移至父層以外的範圍，以達到Slot的效果。本篇以相同的概念做出數字中，在數字跳動的時候，數字有替換的效果！本篇會有比較多的javascript程式來操作元素內的文字，也以javascript操控css的animation-play-state來完成本次的實作。

樣式先出來

首先將每個字元都以.clock-txt包起來，並針對每個會顯示數字的元素添加id，記住id必須是唯一值！然後將.clock-txt的父層.clock-item以上一篇Slot的概念設置高度後設定overflow: hidden。

<style>
  .clock {
    display: flex;
    background-color: NavajoWhite;
  }
  .clock-item,
  .clock-symbol {
    display: flex;
    margin: 5px;
    width: 50px;
    line-height: 70px;
    font-size: 48px;
    justify-content: center;
  }
  .clock-item {
    background-color: FloralWhite;
    border: 2px solid Chocolate;
    border-radius: 10px;
    box-shadow: 0 0 6px 1px SaddleBrown;
    overflow: hidden;
  }
</style>

<div class="clock is-active">
  <div class="clock-item">
    <div class="clock-txt" id="hour-1">-</div>
  </div>
  <div class="clock-item">
    <div class="clock-txt" id="hour-2">-</div>
  </div>
  <div class="clock-symbol">
    :
  </div>
  <div class="clock-item">
    <div class="clock-txt" id="min-1">-</div>
  </div>
  <div class="clock-item">
    <div class="clock-txt" id="min-2">-</div>
  </div>
  <div class="clock-symbol">
    :
  </div>
  <div class="clock-item">
    <div class="clock-txt" id="sec-1">-</div>
  </div>
  <div class="clock-item">
    <div class="clock-txt" id="sec-2">-</div>
  </div>
</div>

子層的文字就可以動起來了！

對子層的.clock-txt下animation讓元素位移，從 Y 軸的-100%位移到 Y 軸的100%，並設置時間為一秒，這時候基礎的動畫就完成了！

<style>
  .is-active .clock-txt {
    animation: clockSlide 1s infinite;
  }

  @keyframes clockSlide {
    0% {
      transform: translateY(-100%);
    }
    25%, 75% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(100%);
    }
  }
</style>

再來更多的是Javascript要操控元素的文字跟樣式了

• 接下來的內容雖然操控html及css，但大多以javascript為主。
• 如果只想知道樣式如何寫，下面就不一定要看囉。
• 如需說明的更加詳細，再麻煩提出疑問。

setClock() 方法，每秒執行方法

1. 首先會有setClock()方法，以setInterval每1000毫秒執行一次方法裡的程式。
2. setInterval內會new Date()，就可以拿到當前的時間。
3. 接著就把date丟到setTimeTxt(date)內執行。

setTimeTxt(date) 方法，寫入文字

1. 執行setTimeTxt(date)時，須將丟入date參數。
2. 接著會去尋找各自的id，並將對應的值寫入。

• Math.floor為無條件捨去法。 ex: Math.floor(38 / 10) ==> 3
• %為取得商數。 ex: 12 % 10 ==> 2

<script>
  function setTimeTxt(date) {
    document.getElementById('hour-1').innerText = Math.floor(date.getHours() / 10);
    document.getElementById('hour-2').innerText = date.getHours() % 10;
    document.getElementById('min-1').innerText = Math.floor(date.getMinutes() / 10);
    document.getElementById('min-2').innerText = date.getMinutes() % 10;
    document.getElementById('sec-1').innerText = Math.floor(date.getSeconds() / 10);
    document.getElementById('sec-2').innerText = date.getSeconds() % 10;
  }

  function setClock() {
    setInterval(() => {
      const date = new Date();
      setTimeTxt(date);
      toggleAnimation(date);
    }, 1000);
  }

  setClock();
</script>

只有異動的數字要有animation效果

透過上方的aniamtion及javascript，已經可以讓數字有動態效果，但本篇希望可以將「有變化的數字作移動」就好，這時候就可以以javascript操控元素的樣式animation-play-state，讓元素的animation暫停，以下為設置元素的動畫paused或running的判斷。

toggleAnimation(date) 方法，操控元素的樣式

1. setTimeout250毫秒，方法內的程式會在250毫秒後才執行。
2. 以#sec-1為例，是設定秒鐘的十位數，在秒數%10的商為9時才讓動畫演繹，不然都讓動畫暫停。

<script>
  function toggleAnimation(date) {
    setTimeout(() => {
      if (
        (date.getHours() % 10 === 9 || date.getHours() === 23) && 
        date.getMinutes() % 60 === 59 && 
        date.getSeconds() % 60 === 59
      ) {
        document.getElementById('hour-1').style.animationPlayState = "running"
      } else {
        document.getElementById('hour-1').style.animationPlayState = "paused"
      }

      if (date.getMinutes() % 60 === 59  && date.getSeconds() % 60 === 59) {
        document.getElementById('hour-2').style.animationPlayState = "running"
      } else {
        document.getElementById('hour-2').style.animationPlayState = "paused"
      }

      if (date.getMinutes() % 10 === 9 && date.getSeconds() % 60 === 59) {
        document.getElementById('min-1').style.animationPlayState = "running"
      } else {
        document.getElementById('min-1').style.animationPlayState = "paused"
      }

      if (date.getSeconds() % 60 === 59) {
        document.getElementById('min-2').style.animationPlayState = "running"
      } else {
        document.getElementById('min-2').style.animationPlayState = "paused"
      }

      if (date.getSeconds() % 10 === 9) {
        document.getElementById('sec-1').style.animationPlayState = "running"
      } else {
        document.getElementById('sec-1').style.animationPlayState = "paused"
      }
    }, 250);
  }
</script>

所以～透過html、css、javascript的組合技並運用Slot動畫的概念，做出一款數字變化時有動畫的時鐘！

如果有寫錯的地方，歡迎點評！ 會及時改進～
如果有更好的寫法，歡迎指教！ 希望各位不吝賜教～
如果想看更多效果，歡迎敲碗！ 提供示意圖小編寫寫看～
如果內容疑似侵權，拜託告知！ 內容皆為小編理解後原創～
如果對你有點幫助，拿去用吧！